<template>
  <div class="Da">
      <router-link to="/Act">
        <img src="image/Sort/13.png" alt="">
      </router-link>
      
      <div class="Da-nav">
          <ul>
              <li v-for="(v,i) in this.$store.state.sorta.onearr" :key="i" @click="sec=v.sec">{{v.gid.gid}}</li>
          </ul>
      </div>
      <component :is="sec" ></component>
  </div>
</template>
<script>
import sa from "com/Sort/twolvyou/donta/section/sa.vue";
import sb from "com/Sort/twolvyou/donta/section/sb.vue";
import sc from "com/Sort/twolvyou/donta/section/sc.vue";
export default {
    components:{
        sa,sb,sc
    },
    data(){
        return{
            sec:"sa",
        }
    }
}
</script>

<style scoped>
    .Da{
        /* text-align: center; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: white;
    }
    .Da>a>img{
        width: 3rem;
        height: 0.95rem;
        margin-top: 0.1rem;
    }
    .Da-nav{
        width: 100%;
        height: 0.25rem;
        /* background-color: azure; */
        margin-top: 0.1rem;
        position: relative;
    }
    .Da-nav>ul{
        width: 100%;
        height: 100%;
        white-space: nowrap;
        overflow-x: auto;
    }
    .Da-nav>ul>li:nth-child(1){
        display: inline-block;
        /* width: 100%; */
        height: 100%;
        text-align: center;
        line-height: 0.25rem;
        background-color: #e5f6fe;
        padding: 0rem .1rem 0rem .1rem;
        margin: 0rem .1rem 0rem .1rem;
        border-radius: 2px;
        color: #69b9de;
        /* padding: 0.1rem; */
        /* font-size: 0.125rem; */
    }
    .Da-nav>ul>li{
        display: inline-block;
        /* width: 100%; */
        height: 100%;
        text-align: center;
        line-height: 0.25rem;
        background-color: #f2f2f2;
        padding: 0rem .1rem 0rem .1rem;
        margin: 0rem .1rem 0rem .1rem;
        border-radius: 2px;
        color: #777777;
        /* padding: 0.1rem; */
        /* font-size: 0.125rem; */
    }
</style>